<template>
	<!-- 首页 -->
	<div style="width: 100%;">
		<Header></Header>

		<div style="width: 1300px;margin: 0px auto;margin-top: 20px;">

			<!-- 搜索框 -->
			<div class="sousuo1">
				<el-input placeholder="请输入商品名称搜索" v-model="goodsname">
				</el-input>

			</div>
			<!-- 轮播图 -->
			<div class="lunbo" >
				<div class="lunboxia">
					<div v-for="(t,index) in types" :key="index" class="menu" @click="showByType(t)">
						{{t.typename}}
						<span class="zt">&gt;</span>
					</div>
				</div>
				<el-carousel :interval="3000" arrow="always" height="450px">
					<el-carousel-item v-for="(goods,index) in goodsLunbo" :key="index">
						<h3><img :src="'http://localhost:8080/' + goods.img" style="width: 100%;height:450px;" /></h3>
					</el-carousel-item>
				</el-carousel>
			</div>

			<div>
				<h1 align="center">新书上架</h1>
				<!-- 图书 -->
				<div v-for="(goods,index) in goodsList" :key="index" style="float: left;margin: 10px 32px;width: 260px;height: 380px;">
					<img :src="'http://localhost:8080/' + goods.imgs" style="width: 240px;height: 280px;" /><br /><br />
					<el-link type="danger" @click="getxiangqing(goods)">{{goods.goodsname}} </el-link>&nbsp;
					<el-link type="danger" @click="getxiangqing(goods)"> {{goods.price}}(元)</el-link>&nbsp;
					<el-icon color="#409EFC" class="no-inherit">
						<Share />
					</el-icon>
					<br>
					<div style="color: gray;font-size: 12px;">
						浏览{{goods.lirun}}
					</div>
				</div>
			</div>

		</div>
		<div style="clear: both; width: 100%;height: 50px"></div>
		<div style="width: 1471px;margin: 0px auto;"><img src="../../public/images/di.png" /></div>
		<div style="clear: both; width: 100%;height: 150px;background-color: ghostwhite;"></div>
	</div>
</template>

<script>
	import Axios from 'axios'
	import {
		ElMessage
	} from 'element-plus' //element-plus模块
	import router from "../route/index.js"
	import Header from './Header'
	export default {
		name: 'Index',
		components: {
			Header
		},
		data() {
			return {
				goodsname: '',
				types: [],
				goodsList: [],
				goodsLunbo: [
					{lid:1,images:'images/a.jpg'},
					{lid:2,images:'images/b.jpg'},
					{lid:3,images:'images/c.jpg'},
					{lid:4,images:'images/d.jpg'}
				],
				goods: {},
				show: false,
				list: [],
				showPingjia: false,
				pingjia: [],
				users: {},
				card: {}
			}
		},
		created() {
			this.getUsers();//获得登录的用户信息
			this.getGoodsType();//获得商品类型
			this.getGoods();//获得商品
			this.getLunbo();//获得轮播图
		},
		watch: {
			goodsname() {
				//根据goodsname的变化去后台查找匹配的商品
				Axios.post('/shopmng/api/books/selectName', {
					goodsname: this.goodsname
				}).then(res => {
					this.goodsList = res.data;
				})
			}
		},
		methods: {
			getLunbo() {
				Axios.post('/shopmng/api/lunbo/selectQT').then(res => {
					this.goodsLunbo = res.data;
				});
			},
			getUsers() {
				// 获取sessionstorage中的用户信息
				let str = sessionStorage.getItem('users')
				if (str != null) {
					//把字符串转换成对象 --- sessionStorage存的必须时字符串，所以取出来的也是字符串
					this.users = JSON.parse(str);
				}
			},

			getxiangqing(goods) {
				// this.show = true;
				sessionStorage.setItem('g', JSON.stringify(goods));
				router.push('/ShowOne');

			},
			getGoodsType() { //获取商品类型
				Axios.post('/shopmng/api/type/selectAll').then(res => {
					this.types = res.data.slice(0,8);
				});
			},
			getGoods() {
				Axios.post('/shopmng/api/books/selectAll').then(res => {
					this.goodsList = res.data;
				});
			},
			showByType(types) {
				Axios.post('/shopmng/api/books/selectType', {
					type: types.id
				}).then(res => {
					this.goodsList = res.data;
					sessionStorage.setItem('bks',JSON.stringify(this.goodsList));
					
					router.push({
						name:'Fenlei',
						params:{
							id:1
						}
					})
				});
			}
			
		}
	}
</script>

<style>
	.leixing {
		margin-top: 20px;
		margin-left: 10px;
		clear: both;
		text-align: left;
	}

	.lunbo {
		margin-top: 30px;
	}

	.lx {
		font-size: 15px;
		padding-right: 20px;
		margin-bottom: 20px;
		text-align: left;
	}

	.lx_item {
		font-size: 14px;
		padding: 0px 10px;
		cursor: pointer;
	}

	.el-carousel__item h3 {
		color: #475669;
		font-size: 18px;
		opacity: 0.75;
		line-height: 300px;
		margin: 0;
	}
	.lunbo{
		position: relative;
		
	}
	.lunboxia{
		width: 234px;
		height: 430px;
		background: rgba(32, 60, 220, 0.7);
		position: absolute;
		z-index: 100;
		padding-top: 20px;
	}
	.menu{
		height: 45px;
		line-height: 40px; 
		color: white;
		width: 204px;
		cursor: pointer;
		padding-left: 30px;
		font-size: 14px
	}
	.menu:hover{
		background: orangered;
	}
	.sousuo1{
		margin-top: 15px; 
		width: 80%;
		margin: 0px auto; 
		text-align: center;
	}
	.zt{
		color: white;
		float: right;
		margin-right: 20px;
	}
</style>
